﻿<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="Project.UI._Default" %>

<%@ Register Assembly="CollectionPager" Namespace="SiteUtils" TagPrefix="cc1" %>
<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    <section class="featured">
        <div class="content-wrapper">
            <script type="text/javascript" src="Scripts/jquery.min.js"></script>
            <script type="text/javascript" src="Scripts/slides.min.jquery.js"></script>
            <script>
                $(function () {
                    $('#slides').slides({
                        preload: true,
                        preloadImage: 'Image/Slideshow/loading.gif',
                        play: 5000,
                        pause: 2500,
                        hoverPause: true,
                        animationStart: function (current) {
                            $('.caption').animate({
                                bottom: -35
                            }, 100);
                            if (window.console && console.log) {
                                // example return of current slide number
                                console.log('animationStart on slide: ', current);
                            };
                        },
                        animationComplete: function (current) {
                            $('.caption').animate({
                                bottom: 0
                            }, 500);
                            if (window.console && console.log) {
                                // example return of current slide number
                                console.log('animationComplete on slide: ', current);
                            };
                        },
                        slidesLoaded: function () {
                            $('.caption').animate({
                                bottom: 0
                            }, 500);
                        }
                    });
                });
            </script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#gvProductList img").load(function () {
                        var w = $(this).width();
                        var h = $(this).height();
                        $(this).width(w / 4);
                        $(this).height(h / 4);
                    });
                });
            </script>
            <link rel="stylesheet" href="Styles/Site.css" />
            <div id="container">
                <div id="example">
                    <img src="Image/Slideshow/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon" />
                    <div id="slides">
                        <div class="slides_container">
                            <div class="slide">
                                <a href="#" title="" target="_blank">
                                    <img src="Image/Slideshow/slide1.jpg" width="570" height="400" alt="Slide 1" /></a>
                                <div class="caption" style="bottom: 0">
                                    <p>Giày cao gót quý phái</p>
                                </div>
                            </div>
                            <div class="slide">
                                <a href="#" title="" target="_blank">
                                    <img src="Image/Slideshow/slide2.jpg" width="570" height="400" alt="Slide 2" /></a>
                                <div class="caption">
                                    <p>Giày hacene cute </p>
                                </div>
                            </div>
                            <div class="slide">
                                <a href="#" title="" target="_blank">
                                    <img src="Image/Slideshow/slide3.jpg" width="570" height="320" alt="Slide 3" /></a>
                                <div class="caption">
                                    <p>Converse cờ Ý</p>
                                </div>
                            </div>
                            <div class="slide">
                                <a href="#" title="" target="_blank">
                                    <img src="Image/Slideshow/slide4.jpg" width="570" height="320" alt="Slide 4" /></a>
                                <div class="caption">
                                    <p>Giày converse giảm giá sốc tháng 9</p>
                                </div>
                            </div>
                            <div class="slide">
                                <a href="#" title="" target="_blank">
                                    <img src="Image/Slideshow/slide5.jpg" width="570" height="320" alt="Slide 5" /></a>
                                <div class="caption">
                                    <p>Giày Brown giá 200.000 VND</p>
                                </div>
                            </div>
                            <div class="slide">
                                <a href="#" title="" target="_blank">
                                    <img src="Image/Slideshow/slide6.jpg" width="570" height="400" alt="Slide 6" /></a>
                                <div class="caption">
                                    <p>Classsic shoes lịch lãm</p>
                                </div>
                            </div>
                            <div class="slide">
                                <a href="#" title="" target="_blank">
                                    <img src="Image/Slideshow/slide7.jpg" width="570" height="320" alt="Slide 7" /></a>
                                <div class="caption">
                                    <p>Giày cao gót 200-300.000 VND</p>
                                </div>
                            </div>
                        </div>
                        <a class="prev" href="#">
                            <img width="24" height="43" alt="Arrow Prev" src="Image/Slideshow/arrow-prev.png" />
                        </a>
                        <a class="next" href="#">
                            <img width="24" height="43" alt="Arrow Next" src="Image/Slideshow/arrow-next.png" /></a>

                    </div>
                    <img id="frame" width="739" height="341" alt="Example Frame" src="Image/Slideshow/example-frame.png" />
                </div>
            </div>
        </div>
    </section>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <div>
        <asp:DataList ID="DataList1" runat="server" RepeatColumns="4" RepeatDirection="Horizontal">
            <ItemTemplate>
                <a href='ProductDetail.aspx?pid=<%#Eval("Product_ID") %>'><asp:Image ID="Image2" runat="server" Height="163px" ImageUrl='<%# Eval("Represent_Pic1") %>' Width="211px" /></a>
                <br />
                <asp:Label ID="lblProductname" runat="server" Text='<%# Eval("Product_Name") %>'></asp:Label>
                <br />
                <asp:Label ID="Label2" runat="server" Text="Giá: "></asp:Label>
                <asp:Label ID="lblUnit_Price" runat="server" Text='<%# Eval("Unit_Price") %>'></asp:Label>
                <br />
                <a href='OrderProduct.aspx?oid=<%#Eval("Product_ID") %>'><asp:Image runat="server" Height="40px" Width="46px" ImageUrl="ProductPicture/cart.jpg" /></a>
            </ItemTemplate>
        </asp:DataList>
    </div>
    <br/>
    <div style="margin-left: 340px">
        <cc1:CollectionPager ID="clPager" runat="server" BackText="« Trước"
            FirstText="Đầu" LabelText="Trang:" LastText="Cuối" NextText="Sau »"
            ResultsFormat="Hiển thị {0}-{1} (of {2})">
        </cc1:CollectionPager>
    </div>
</asp:Content>
